<template>
  <div class = wrapper>
    <!--  标题栏  -->
    <div class="wrapper">
      <!--  返回  -->
      <div class="return">
        <!--  svg图片不显示，所以用的png  -->
        <img class="returnImg" src="../../../assets/static/publicImg/back.png">
      </div>
      <!--  标题  -->
      <div class="paymentDiv">
        <span class="payment">支付</span>
      </div>
      <!--  设置  -->
      <div class="setup">
        <img class="setupImg" src="../../../assets/static/publicImg/set.png">
      </div>
    </div>
    <!--  内容  -->
    <div class="wrapper">
      <!--  钱包信息  -->
      <div class="wrapper">
        <!--  钱包  -->
        <div class="wrapper">
          <!--  钱包标题  -->
          <div class="wrapper">
            <!--  三个点  -->
            <div class="three">
              <img class="threeImg" src="../../../assets/static/payment/11.svg">
            </div>
            <!--  i.joozPay Wallet  -->
            <div class="wallet">
              <img class="walletImg" src="../../../assets/static/walletDetail/4.png">
            </div>
          </div>
          <!--  钱包余额  -->
          <div class="wrapper">
            <!--  字  -->
            <div class="balanceDiv">
              <span class="balance">钱包余额</span>
            </div>
            <div class="wrapper">
              <!--  图标  -->
              <div class="Gold coins">
                <img class="Gold coinsImg" src="../../../assets/static/payment/5.svg">
              </div>
              <!--  数字  -->
              <div class="numberDiv">
                <span class="number">2017.25</span>
              </div>
            </div>
          </div>
        </div>
        <!--  操作  -->
        <div class="wrapper">
          <!--  验证身份和消费限额，可左右滑动  -->
          <div class="wrapper">
            <!--  验证身份  -->
            <div class="background">
              <!--  背景图  -->
              <img class="backgroundImg" src="../../../assets/static/payment/8.png">
              <div></div>
            </div>
            <!--  消费限额  -->
            <div class="background">
              <!--  背景图  -->
              <img class="backgroundImg" src="../../../assets/static/payment/7.png">
              <div class="wrapper">

              </div>
            </div>
          </div>
          <!--  操作，可左右滑动  -->
          <div class="wrapper">
            <!--  绑卡  -->
            <div class="wrapper">

            </div>
            <!--  充值  -->
            <div class="wrapper"></div>
            <!--  扫描支付  -->
            <div class="wrapper"></div>
            <!--  转账  -->
            <div class="wrapper"></div>
            <!--  收款  -->
            <div class="wrapper"></div>
          </div>
        </div>
      </div>
      <!--  介绍和记录  -->
      <div>
        <!--  让您的钱花的更有价值  -->
        <div>
          <!--  标题  -->
          <div>
            <!--  图标  -->
            <div class="lcon">
              <img class="lconImg" src="../../../assets/static/publicImg/r3.png">
            </div>
            <!--  文字  -->
            <div class="textDiv">
              <span class="text">让您的钱花的更有价值</span>
            </div>
          </div>
          <!--  内容 -->
          <div class="wrapper">
            <!--  可左右滑动 -->
            <div class="wrapper">
              <div class="textDiv">
                <span class="text">转到任意银行账户</span>
              </div>
              <div class="img">
                <img class="imgImg" src="../../../assets/static/payment/12.png">
              </div>
            </div>
            <div>
              <div>
                <span class="text">申请i.JoozPayCard</span>
              </div>
              <div>
                <img class="imgImg" src="../../../assets/static/payment/6.png">
              </div>
            </div>
            <div>
              <div>
                <span class="text">了解我们如何保障您的钱包的</span>
              </div>
              <div>
                <img class="imgImg" src="../../../assets/static/payment/5.png">
              </div>
            </div>
          </div>
        </div>
        <!--  最近交易  -->
        <div>
          <!--  标题  -->
          <div>
            <!--  图标  -->
            <div>
              <img class="be careful" src="../../../assets/static/payment/3.png">
            </div>
            <!--  文字  -->
            <div class="latelyDiv">
              <span class="lately">最近交易</span>
            </div>
          </div>
          <!--  内容 -->
          <div>
            <!--  搜索 -->
            <div>
              <!--  输入框内文字 -->
              <div class="Friendly">
                <div class="Friendly">Kid Friendly</div>
              </div>
              <!--  输入框内图标 -->
              <div class="home">
                <img class="homeImg" src="../../../assets/static/payment/1.png"></div>
            </div>
            <!--  记录 -->
            <div class="wrapper">
              <!--  左侧 -->
              <div class="wrapper">
                <!--  图片 -->
                <div class="rise">
                  <img class="riseImg" src="../../../assets/static/payment/4.png">
                </div>
                <div class="wrapper">
                  <!--  交易名称 -->
                  <div class="commodityDiv">
                    <span class="commodity">商品1</span>
                  </div>
                  <!--  创建时间 -->
                  <div class="dateDiv">
                    <span class="date">2021-10-20</span>
                  </div>
                </div>
              </div>
              <!--  右侧 -->
              <div class="wrapper">
                <!--  金额 -->
                <div class="amount of moneyDiv">
                  <span class="amount of money">200</span>
                </div>
                <!--  所需花费的时间 -->
                <div class="timeDiv">
                  <span class="time">3min</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Middle',
  components: {
  },
  data() {
    return {
      artical: [
        {}
      ],
    }
  },
  methods: {
    /**
     * 是否有图片
     * @param img
     * @returns {boolean}
     */
    handsPicture(img) {
      if (typeof (img) === Array) {
        return img.length !== 0
      } else {
        return false
      }
    },
    /**
     * 发布文章成功
     */
    createPostsSuccess() {
      this.firstArticleList()
    },
    // --------------------- axios -------------------------------
  },
}
</script>

<style scoped>
/*-------------- div居中 -----------------*/
.wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.return{
  display: flex;
  align-items: center;
  justify-content: center;
}
.paymentDiv{
  display: flex;
  align-items: center;
  justify-content: center;
}
.setup{
  display: flex;
  align-items: center;
  justify-content: center;
}
/*-------------- span字体 -----------------*/
.payment{
  width: 70px;
  height: 34px;
  font-size: 36px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #FFFFFF;
}
.balance{
  width: 87px;
  height: 21px;
  font-size: 22px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
}
.number{
  width: 152px;
  height: 32px;
  font-size: 43px;
  font-family: Alibaba PuHuiTi;
  font-weight: bold;
  color: #333333;
}
.text{
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #FFFFFF;
}
.lately{
  font-size: 30px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #000000;
  line-height: 44px;
}
.Friendly{
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  line-height: 44px;
}
.commodity{
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  line-height: 44px;
}
.date{
  font-size: 20px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #999999;
  line-height: 44px;
}
.amount of money{
  font-size: 26px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  line-height: 44px;
}
.time{
  font-size: 20px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #999999;
  line-height: 44px;
}
/*-------------- img图片 -----------------*/
</style>
